{include file="public/header" /}

<body>
<div class="layui-fluid layui-anim layui-anim-fadein">
    <form action="{:url('recharge')}" class="layui-form" lay-filter="builderForm"
          data-token=""
          data-nav=""
          data-just="false"
    >
        <input type="hidden" name="type" value="save"/>
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">充值会员</label>
                            <div class="layui-input-block">
                                <div class="choose-user-card" lay-click="choose">
                                    <div class="empty"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {:builderFormInit([
                    'title' => '充值账户',
                    'name' => 'account', 'options' => $assets,
                    'md' => 12
                    ])->getFormItemSelectHtml('account')}

                    {:builderFormInit([
                    'title' => '账户余额',
                    'name' => 'blc',
                    'placeholder' => '-',
                    'md' => 12
                    ])->getFormItemInputHtml('number','',true)}

                    {:builderFormInit([
                    'title' => '充值方式',
                    'name' => 'mode',
                    'options' => [1=>'增加',2=>'减少'],
                    'value'=>1,
                    'md' => 12
                    ])->getFormItemCheckboxHtml('radio')}

                    {:builderFormInit([
                    'title' => '充值金额',
                    'name' => 'amount',
                    'md' => 12 ,'placeholder'=>'请填写增加/减少的金额',
                    'req'=> true
                    ])->getFormItemInputHtml('number')}

                    {:builderFormInit([
                    'title' => '充值备注',
                    'name' => 'remarks',
                    'md' => 12 ,
                    'placeholder'=>'充值备注(选填)'
                    ])->getFormItemInputHtml()}

                </div>

            </div>
        </div>
        <div class="layui-footer">
            <button class="layui-btn" lay-filter="builderFormSubmit" lay-submit>
                保存
            </button>
        </div>
    </form>
</div>

<script type="text/html" id="userTpl">
    <input type="hidden" id="id" name="id" value="{{d.id}}"/>
    <div class="avatar">
        <img src="{{d.photo}}" alt="用户头像">
    </div>
    <div class="user-info">
        <div class="nickname">{{d.nickname}} - {{d.code}}</div>
        <div class="phone">{{d.mobile}}</div>
    </div>
</script>
</body>
{include file="public/footer" /}
<script>
    layui.use(['edit', 'form', 'table', 'form', 'methods'], function () {

        layui.edit.render();

        const o = layui.jquery, ly = layui.layer, methods = layui.methods, form = layui.form, tpl = layui.laytpl;

        const getBalance = (value, id) => {
            if (value && id) {
                methods.fetchGet('{:url("user/recharge")}', {val: value, id: id, type: 'account'}, (data) => {
                    if (data.code === 1) {
                        o('input[name="blc"]').val(data.result);
                    } else {
                        ly.msg(data.msg);
                    }
                })
            }
        }
        methods.event.click('choose', () => {
            methods.openTableLayer({title: '选择会员', url: '{:url("user/choose")}', row: true}, (data) => {
                tpl(o('#userTpl').html()).render(data, function (html) {
                    o('.choose-user-card').html(html);
                });
                getBalance(o("#account").val(), data.id)
            })
        })

        form.on('select(account)', (data) => {
            var id = o("#id").val();
            if (!id) {
                ly.msg('请先选择要充值的会员');
                return false;
            }
            data.value ? getBalance(data.value, id) : o('input[name="blc"]').val('');
        });

    });
</script>
</html>